<!--首页-->
<template>
  <div class="home_box">
    <!--    查询表单-->
    <div class="home_menu">
      <div class="home_left">
        <div class="home_search">
          <span>前几周至今日：</span>
          <el-input v-model="searchDate"></el-input>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </div>
    </div>
    <!--    主页四个图表-->
    <div class="home_echarts">
      <div>
        <!--        订单-->
        <order-statistics></order-statistics>
        <!--        用户-->
        <user-statistics></user-statistics>
      </div>
      <div>
        <!--        商品-->
        <product-statistics></product-statistics>
        <!--        金额-->
        <money-statistics></money-statistics>
      </div>
    </div>
  </div>
</template>
<script>
import OrderStatistics from "./orderStatistics";
import ProductStatistics from "./productStatistics";
import UserStatistics from "./userStatistics";
import MoneyStatistics from "./moneyStatistics";

export default {
  data() {
    return {
      searchDate: "",
    };
  },
  methods: {
    // 点击查询，查询前几周至今日
    onSearch() {
      console.log(this.searchDate);
    },
    // 重置搜索框
    reset() {
      this.searchDate = "";
    },
  },
  components: {
    OrderStatistics,
    ProductStatistics,
    UserStatistics,
    MoneyStatistics,
  },
};
</script>
<style>
.home_box {
  display: flex;
  flex-direction: column;
}

.home_left {
  display: flex;
  justify-content: space-between;
}

.home_search {
  display: flex;
  width: 550px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}

.home_search .el-input {
  width: 200px;
}

.home_search .el-button:first-child {
  background-color: #5749ff;
  border: none;
}

.home_search .el-button {
  margin: 0 5px 0 30px;
  /*color: #0a0a0a !important;*/
}

.home_echarts {
  display: flex;
  flex-direction: column;
}

.home_echarts > div {
  width: 100%;
  padding: 25px 0;
  display: flex;
}
</style>
